<template>
  <el-container>
    <!--头部区域-->
    <el-header>
      <div class="logo">
        <img src="../assets/dengling_logo1.png" alt />
        <span>瞪羚科技后台管理系统</span>
      </div>
      <el-button type="info" @click="logout">退出登录</el-button>
    </el-header>
    <el-container>
      <!--导航栏区-->
      <el-aside width="200px">
        <!--侧边栏菜单区-->
        <el-menu background-color="#021737" text-color="#fff" active-text-color="#409eff" unique-opened :default-active="activePath">
          <!--一级菜单-->
          <el-submenu index="1">
            <template slot="title">信息列表</template>
          <el-menu-item-group>
            <el-menu-item index="1-1" @click="newsList_btn('1-1')">
              <!--文本-->
              <span>新闻列表</span>
            </el-menu-item>
            <el-menu-item index="1-2" @click="recruimentList_btn('1-2')">
              <span>招聘信息列表</span>
            </el-menu-item>
            <el-menu-item index="1-3" @click="projectList_btn('1-3')">
              <span>项目介绍信息列表</span>
            </el-menu-item>
             <el-menu-item index="1-4" @click="productServiceList_btn('1-4')">
              <span>产品服务列表</span>
            </el-menu-item>
             <el-menu-item index="1-5" @click="partyBuildingList_btn('1-5')">
              <span>党建列表</span>
            </el-menu-item>
          </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
              <template slot="title">回收站</template>
              <el-menu-item index="2-1" @click="newsRecovery_btn('2-1')">
              <!--文本-->
                <span>新闻回收站</span>
              </el-menu-item>
              <el-menu-item index="2-2" @click="recruimentRecovery_btn('2-2')">
                <span>招聘信息回收站</span>
              </el-menu-item>
              <el-menu-item index="2-3" @click="projectRecovery_btn('2-3')">
                <span>项目介绍信息回收站</span>
              </el-menu-item>
              <el-menu-item index="2-4" @click="productRecovery_btn('2-4')">
                <span>产品服务信息回收站</span>
              </el-menu-item>
              <el-menu-item index="2-5" @click="partyRecovery_btn('2-5')">
                <span>党建信息回收站</span>
              </el-menu-item>
        </el-submenu>
        </el-menu>
      </el-aside>
      <!--右侧内容主体-->
      <el-main>
        <router-view v-if="isShow"></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      isShow: true,
      activePath:''
    }
  },
  created() {
    this.activePath = window.sessionStorage.getItem('activePath')
    if(this.activePath == null){
      this.activePath = '1-1'
    }
  },
  provide() {
    return {
      reload: this.reload
    }
  },
  methods: {
    reload() {
      this.isShow = false
      this.$nextTick(function () {
        this.isShow = true
      });
    },
    async logout() {
      const { data: res } = await this.$http.get('user/logout')
      if (res.code !== 1000) return this.$message.error(res.msg)
      this.$message.success(res.msg)
      window.sessionStorage.clear()
      this.$router.push('/login')
    },
    newsList_btn(activePath) {
      this.$router.push('/newsList')
      /* this.activePath = '1-1' */
      window.sessionStorage.setItem('activePath',activePath)
    },
    recruimentList_btn(activePath) {
      this.$router.push('/recruitmentList')
      /* this.activePath = '1-2' */
       window.sessionStorage.setItem('activePath',activePath)
    },
    newsRecovery_btn(activePath) {
      this.$router.push('/recycle_binNews')
      /* this.activePath = '2-1' */
       window.sessionStorage.setItem('activePath',activePath)
    },
    recruimentRecovery_btn(activePath) {
      this.$router.push('/recycle_binRecruitment')
      /* this.activePath = '2-2' */
       window.sessionStorage.setItem('activePath',activePath)
    },
    projectList_btn(activePath){
      this.$router.push('/project_introduction')
      /* this.activePath = '1-3' */
       window.sessionStorage.setItem('activePath',activePath)
    },
    projectRecovery_btn(activePath){
      this.$router.push('/recycleBinProject')
      /* this.activePath = '2-3' */
       window.sessionStorage.setItem('activePath',activePath)
    },
    productServiceList_btn(activePath){
      this.$router.push('/productServiceList')
      /* this.activePath = '1-4' */
       window.sessionStorage.setItem('activePath',activePath)
    },
    partyBuildingList_btn(activePath){
      this.$router.push('/partyBuildingList')
      /* this.activePath = '1-5' */
       window.sessionStorage.setItem('activePath',activePath)
    },
    productRecovery_btn(activePath){
      this.$router.push('/recycleBinProduct')
      /* this.activePath = '2-4' */
       window.sessionStorage.setItem('activePath',activePath)
    },
    partyRecovery_btn(activePath){
      this.$router.push('/recycleBinParty')
      /* this.activePath = '2-5' */
       window.sessionStorage.setItem('activePath',activePath)
    }
  }
}
</script>

<style scoped>
.el-container {
  height: 100%;
}
.el-header {
  background-color: #021737;
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  align-items: center;
  color: #fff;
  font-size: 20px;
}
.el-header > div {
  display: flex;
  align-items: center;
}
.el-header > div > span {
  margin-left: 15px;
}
img {
  height: 40px;
  width: auto;
}
.el-aside {
  background-color: #021737;
}
.el-aside .el-menu{
  border-right: none;
}
.el-main {
  background-color: #eee;
  /* overflow: hidden; */
}
</style>